<template>
  <!-- 社保公积金，代发工资 通用 更多查询按钮 -->
  <span id="MoreSearchPop">
    <el-popover trigger="manual" placement="bottom-start" popper-class="moreSearchPop" :value="visible">
      <slot name="title">
        <div class="title">
          <i class="titleIcon" />
          <span>{{title}}</span>
          <i class="closeBtn el-icon-close" @click="handleChangeStatus(false)"></i>
        </div>
      </slot>
      <slot name="reference">
        <el-button type="text" size="medium" slot="reference" @click="handleChangeStatus(true)">更多</el-button>
      </slot>
      <slot name="content">
        <el-form class="moreSearchFrom" :model="detailsParams" inline>
          <el-form-item :label="item.label" v-for="(item,index) in formProps" :key="index">
            <el-select v-model="detailsParams[item.prop]" v-if="item.label == '员工类型'" clearable>
              <el-option v-for="item in registerTypeList" :key="item.key" :label="item.value" :value="item.key">
              </el-option>
            </el-select>
            <el-input v-model="detailsParams[item.prop]" v-else />
          </el-form-item>
        </el-form>
      </slot>
    </el-popover>
  </span>
</template>
<script>
export default {
  name: 'MoreSearchPop',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: () => {
        return '查询';
      }
    },
    formProps: {
      type: Array,
      default: () => {
        return [{ label: '岗位', prop: '' }, { label: '员工类型', prop: '' },];
      }
    }
  },
  data() {
    return {
      detailsParams: {},
      registerTypeList: []
    };
  },
  methods: {
    handleChangeStatus(visible) {
      this.$emit('update:visible', visible);
    },
    getFormData() {
      console.log('this.detailsParams', this.detailsParams);
      return this.detailsParams;
    },
    searchRegisterTypeList() {
      this.$api.commonXc
        .GetRegistertype()
        .then(res => {
          console.log('员工类型列表', res);
          this.registerTypeList = res.data.data;
        })
    }
  },
  mounted() {
    this.searchRegisterTypeList();
  },

  deactivated() {
    this.$emit('update:visible', false);
  }
};
</script>
<style lang="less">
.moreSearchPop {
  width: calc(100% - 155px);
  padding: 20px 20px 40px 20px;
  .title {
    display: flex;
    align-items: center;
    position: relative;
    .titleIcon {
      display: inline-block;
      width: 5px;
      height: 16px;
      border-radius: 15px;
      background: #57b2f2;
      margin-right: 10px;
    }
    .closeBtn {
      position: absolute;
      right: -5px;
      top: 0;
      font-size: 18px;
      &:hover {
        color: #57b2f2;
        cursor: pointer;
      }
    }
  }
  .moreSearchFrom {
    display: flex;
    align-items: flex-end;
    position: relative;
    height: 65px;
    width: 100%;
    .closeMoreSearch {
      position: absolute;
      right: 0;
      top: 0;
    }
    .el-form-item {
      margin-bottom: 12px;
      .el-input {
        width: 120px;
      }
    }
  }
}
</style>